<template>
  <header class="head">
    <h2>4S店管理系统</h2>
    <!-- <div style="width:280px;height:65px;">
      <Aplayer style="width:280px;height:65px;" :music="videoUpload.music"></Aplayer>
    </div> -->
    <div class="infos" v-if="userinfo">
      <Avatar :userinfo="userinfo" />
      <p>{{userinfo.username}}</p>
      
      <p>
        <el-tag effect="dark" type="success">{{userinfo.roleid | rolename}}</el-tag>
      </p>
      <p>
        <el-button @click="loginout" type="danger" icon="el-icon-switch-button" circle></el-button>
      </p>
    </div>
  </header>
</template>

<script>
import Avatar from "./uploadavatar.vue";
import Aplayer from "vue-aplayer";
export default {
  props: ["userinfo"],
  components: {
    Avatar,
    Aplayer
  },
  data() {
    return {
        videoUpload: {
        //progress: false,
        // progressPercent: 0,
        // successPercent: 0,
        theme: "#ffc0cb",
        autoplay: true,
        repeat: "repeat-one", // 轮播模式。值可以是 'repeat-one'（单曲循环）'repeat-all'（列表循环）或者 'no-repeat'（不循环）。为了好记，还可以使用对应的 'music' 'list' 'none'
        mini: true, // 迷你模式
        float: true, // 浮动模式。你可以在页面上随意拖放你的播放器
        music: {
          // 当前播放的音乐
          title: "Tuesday",
          author: "Danelle Sandoval",
          // url: 'https://assets.smallsunnyfox.com/music/1.mp3',
          // url:
            // "https://webfs.yun.kugou.com/202009131409/2c6d63dbd4348e8da3197929d0468a71/G178/M09/0E/10/8g0DAF2fFZ6AVYlUADpjHCpHeoY778.mp3",
          url:
            "https://webfs.yun.kugou.com/202009131415/0c0c3a53c8cf210c1ae4283503a8129f/part/0/961034/G104/M06/19/11/qA0DAFvliCWAUNrwADhUKsyRxrU760.mp3",

          pic:
            "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2366432289,1795558543&fm=26&gp=0.jpg", // 封面图片
        },
      },
    };
  },
  methods: {
    loginout() {
      this.$confirm("你确定要退出登录吗，是否继续？", "退出提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          sessionStorage.removeItem("roleid");
          sessionStorage.removeItem("token");
          this.$router.push({ name: "Login" });
        })
        .catch(() => {});
    },
  },
  mounted() {},
};
</script>


<style lang="scss" scoped>
.head {
  width: 100%;
  height: 65px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  h2 {
    font-size: 20px;
    //    color: #666;
    color: #eeeeee;
  }
  .infos {
    display: flex;
    align-items: center;
    p {
      margin: 0 10px;
      cursor: pointer;
      color: #eeeeee;
    }
  }
}


// .aplayer{
//     background-color:rgba(0,0,0,0,6);
// }
</style>